function sel(str) {
	return document.querySelectorAll(str).length == 1
		? document.querySelectorAll(str)[0]
		: document.querySelectorAll(str);
}

window.addEventListener('scroll', (e) => {
	// 卷上去的 % (总高度 - 页面高度)
	let scrolled =
		document.documentElement.scrollTop /
		(document.documentElement.scrollHeight -
			document.documentElement.clientHeight);
	console.log(scrolled);
	let $h1 = sel('h1');
	let $theChip = sel('#the-chip');
	let $A13 = sel('#A13'),
		$A13TextBg = sel('#the-chip .text-bg');

	$theChip.style.width = $theChip.style.height =
		document.documentElement.clientWidth *
			(scrolled * scrolled * scrolled) *
			20 +
		'px';

	if (scrolled <= 0.1) {
		$h1.style.opacity = (0.1 - scrolled) * 10;
	} else {
		$h1.style.opacity = 0;
	}

	if (scrolled <= 0.2) {
		$A13.style.opacity = (scrolled - 0.1) * 10;
	} else {
		$A13.style.opacity = 1;
	}

	if (scrolled >= 0.5) {
		$A13TextBg.style.opacity = (1 - scrolled) * 2;
		$theChip.classList.add('transparent');
	} else {
		$A13TextBg.style.opacity = 1;
		$theChip.classList.remove('transparent');
	}

	if (scrolled >= 0.95) {
		$theChip.style.opacity = (1 - scrolled) * 20;
	} else {
		$theChip.style.opacity = 1;
	}
});
